<template>
  <div class="list_box">
    <ul class="list_ul">
      <li @click="toPage(item.classify , item.title)" class="list_list" v-for="(item, index) in get_list" :key="index">
        <p class="title">{{ item.title }}</p>
        <p class="classify">
          <span>分类</span>
          <b>{{ item.classify }}</b>
        </p>
        <p class="date">
          <span>时间</span>
          <b>{{ item.time }}</b>
        </p>
        <p class="count">
          <span>次数</span>
          <b>{{ item.count }}</b>
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters , mapActions } from "vuex";
export default {
  name: "List",
  computed: {
    ...mapGetters(["get_list"]),
  },
  methods : {
      ...mapActions(["get_hot"]),
      toPage : function(classify,title){
          this.$router.push(`/page/${classify}/${title}`)
      }
  },
  created(){ 
     this.get_hot()
  }
};
</script>

<style>
.list_box {
}
.list_ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.list_list {
  list-style: none;
  border: 1px solid #e3e3e3;
  flex-grow: 1;
  margin: 0.5em;
  padding: 0.3em;
  cursor: pointer;
}
.list_list .title {
  font-size: 1.5em;
}
.list_list .count {
  font-size: 0.5em;
}
.list_list .classify {
  font-size: 0.5em;
}
.list_list .date {
  font-size: 0.5em;
}
.list_list p {
  margin: 0.1em 0;
}
.list_list p b {
  padding: 0px 0.5em;
  background-color: #eee;
}
</style>